<template>
	<el-form ref="applyForm" :model="applyForm" :rules="applyRules" label-width="120px" class="apply-form">
		<el-form-item label="会议室" required>
			<el-col :span="9">
				<el-select v-model="applyForm.RoomID" placeholder="请选择" style="width: 238px;" @change="fnChangeRoom">
					<el-option v-for="item in conferences" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
				</el-select>
			</el-col>
			<el-col :span="4" class="label-txt"><span style="color: red;">*</span>申请部门</el-col>
			<el-col :span="9">
				<el-form-item prop="DeptName">
					<el-select v-model="applyForm.DeptName" placeholder="请选择" style="width: 238px;">
						<el-option v-for="item in depts" :key="item.ORGANIZATION_NAME" :label="item.ORGANIZATION_NAME" :value="item.ORGANIZATION_NAME"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
		</el-form-item>

		<el-form-item label="申请人" required>
			<el-col :span="9">
				<el-input v-model="applyForm.Applicant"></el-input>
			</el-col>
			<el-col :span="4" class="label-txt"><span style="color: red;">*</span>申请人电话</el-col>
			<el-col :span="9">
				<el-form-item prop="Mobile">
					<el-input v-model="applyForm.Mobile"></el-input>
				</el-form-item>
			</el-col>
		</el-form-item>

		<el-form-item label="会议主题" prop="Subject">
			<el-col :span="23">
				<el-input v-model="applyForm.Subject"></el-input>
			</el-col>
		</el-form-item>

		<el-form-item label="开始时间" required>
			<el-col :span="9">
				<el-date-picker style="width: 238px;" v-model="applyForm.FromTime" type="datetime" placeholder="开始时间" format="yyyy-MM-dd HH:mm" clearable @change="fnGetFromTime">
				</el-date-picker>
			</el-col>
			<el-col :span="4" class="label-txt"><span style="color: red;">*</span>结束时间</el-col>
			<el-col :span="9">
				<el-form-item prop="ToTime">
					<el-date-picker style="width: 238px;" v-model="applyForm.ToTime" type="datetime" placeholder="结束时间" format="yyyy-MM-dd HH:mm" clearable @change="fnGetToTime">
					</el-date-picker>
				</el-form-item>
			</el-col>
		</el-form-item>

		<el-form-item label="主持人" required>
			<el-col :span="9">
				<el-input v-model="applyForm.Host"></el-input>
			</el-col>
			<el-col :span="4" class="label-txt"><span style="color: red;">*</span>参会人数</el-col>
			<el-col :span="9">
				<el-form-item prop="Number">
					<el-input-number style="width:238px;" v-model="applyForm.Number"></el-input-number>
				</el-form-item>
			</el-col>
		</el-form-item>

		<el-form-item v-show="hasMeeting">
			<el-col :span="23" class="meeting-list">
				<p class="meeting-head">{{conferenceName}}使用情况：</p>
				<p v-if="meetings.length == 0">暂无会议记录~</p>
				<p v-else v-for="item in meetings">{{item.FromTime}} 至  {{item.ToTime}}  召开{{item.Subject}}会议</p>
			</el-col>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="fnAddMeetingApply">提交补单申请</el-button>
			<el-button @click="emitGoBack">返回</el-button>
		</el-form-item>
	</el-form>
</template>

<script>
    import Svc from '../../service/index.js'
    import moment from 'moment'
    export default {
        data() {
            //验证电话号码
            var checkMobile = (rule, value, callback) => {
                var reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if (value === '') {
                    callback(new Error('请输入申请人联系电话！'));
                } else if (!reg.test(value)) {
                    callback(new Error('请输入有效的手机号码！'));
                } else {
                    callback();
                }
            };

            //验证参会人数
            var checkNum = (rule, value, callback) => {
                if (value === 0) {
                    callback(new Error('请输入参会人数'));
                } else {
                    callback();
                }
            };

            return {
                conferences : [], //所有会议室
                depts :[], //所有部门
                applyRules: {
                    Mobile: [
                        { required: true, validator: checkMobile,  trigger: 'blur' }
                    ],
                    Number: [
                        { required: true, validator: checkNum,  trigger: 'blur' }
                    ]
                },
                //申请内容
                applyForm:{
                    RoomID : '', // 会议室ID
                    Applicant : '',// 申请人
                    DeptName : '',// 部门
                    Mobile  : '', //电话
                    Host : '', // 主持人
                    Subject : '',//会议主题
                    FromTime : '',//开始时间
                    ToTime : '',//结束时间
                    Number : ''// 参会人数
                },
                hasMeeting : false, //选择的会议室是否有会议记录
                conferenceName : '', //当前选择的会议室名称
                meetings : [] //当前会议室的会议记录
            }
        },
        methods: {
            //自定义事件->返回
            emitGoBack(){
                this.$emit('go-back','my-apply')
            },
            //显示message提示框
            openMessage : function(msg,type){
                this.$message({
                    showClose: true,
                    message: msg,
                    type: type
                });
            },
            //获取登录用户的信息
            fnGetUserInfo(){
                var user = sessionStorage.getItem('user');
                if (user) {
                    user = JSON.parse(user);
                    this.applyForm.Applicant = user.EmpName || '';
                    this.applyForm.DeptName = user.DeptName || '';
                }
            },
            //获取选择时间内的预约申请记录
            fnGetRecords(id){
                var that = this
                var params = {
                    RoomID : id,
                    From : (moment(new Date()).format('YYYY-MM-DD')) + " " + "00:00:00",
                    To : ""
                }
                Svc.fnPostData('/api/mroom/appointment/room',params,function(res){
                    if (res.body.ErrCode == 0){
                        that.meetings = res.body.Data || []
                    } else {
                        that.openMessage("当前选择会议室会议记录获取失败！",'error')
                    }
                },function(res){
                    that.openMessage("网络错误，请重新！",'error')
                })
            },
            //获取所有会议室
            fnGetConference(){
                var that = this
                Svc.fnGetData('/api/mroom/room/fetch',{},function(res){
                    if (res.body.ErrCode == 0){
                        that.conferences = res.body.Data
                    } else {
                        that.openMessage("会议室获取失败！",'error')
                    }
                },function(res){
                    that.openMessage("网络错误，请重新！",'error')
                })
            },
            //选择会议室
            fnChangeRoom(val) {
                var that = this
                that.hasMeeting = true
                for(var i = 0; i < that.conferences.length; i++) {
                    if(that.conferences[i].ID == val) {
                        that.conferenceName = that.conferences[i].Name
                        break
                    }
                }
                that.fnGetRecords(val)
            },//获取所有部门信息
            fnGetDepts(){
                var that = this
                Svc.fnGetData('/api/account/alldepts',{},function(res){
                    if (res.body.ErrCode == 0){
                        that.depts = res.body.Data
                    } else {
                        that.openMessage("部门信息获取失败！",'error')
                    }
                },function(res){
                    that.openMessage("网络错误，请重新！",'error')
                })
            },
            //获取开始日期
            fnGetFromTime(val){
                this.applyForm.FromTime = val
            },
            //获取结束日期
            fnGetToTime(val){
                this.applyForm.ToTime = val
            },
            //提交补单申请
            fnAddMeetingApply(){
                var that = this
                that.$refs.applyForm.validate((valid) => {
                    if (valid) {
                        Svc.fnPostData('/api/mroom/appointment/adhoc',that.applyForm,function(res){
                            if (res.body.ErrCode == 0){
                                that.openMessage('会议室补单申请提交成功！','success')
                                setTimeout(function () {
                                    that.$router.push({path:'/query'});
                                },1000);
                            } else {
                                that.openMessage(res.body.ErrMsg,'error')
                            }
                        },function(res){
                            that.openMessage("网络错误，请重新！",'error')
                        })
                    } else {
                        return false
                    }
                })
            }
        },
        mounted() {
            //获取登录用户的信息
            this.fnGetUserInfo()
            //获取所有会议室
            this.fnGetConference()
            //获取所有部门信息
            this.fnGetDepts()
        }
    }
</script>

<style scoped>
	.apply-form {
		margin:20px;
		width:70%;
		min-width:600px;
	}

	.label-txt {
		text-align: right;
		margin-right: 25px;
	}

	.meeting-list{
		border: 1px solid #bfcbd9;
		border-radius: 5px;
		padding: 5px 15px;
		font-size: 12px;
	}

	.meeting-list p{
		margin: 0;
	}

	.meeting-head{
		font-size: 13px;
		font-weight: 500;
	}
</style>